require(['config'], function() {
    require(['jquery', 'swiper', 'template', 'loadH','loadF2','loadM', 'jquery.cookie'], function($, Swiper, template) {
      /* 创建 Swiper 对象实例，实现轮播图效果 */
      
      //获取地址栏参数
      function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  decodeURIComponent(r[2]); return null;
      }


      /* 查询推荐商品数据，并渲染 */
      $.getJSON('http://www.xiongmaoyouxuan.com/api/tab/'+GetQueryString('page'), resData => {
        // console.log('获取到数据：', resData)
        // 获取返回数据中表示推荐商品的数组
        const _products = resData.data.items.list
        // console.log('推荐商品：', _products)
        // 根据推荐商品的数组来渲染模板
        const html = template('hot-template', {products: _products})
        // console.log('渲染后：', html)
        // 添加到 DOM 树中
        $('.hot').append(html)
        console.log(_products)
      })
  
      
  
      /* 添加购物车：为按钮绑定点击事件--利用事件委派 */
      $('.hot').on('click', '.add-to-cart', e => {
        // 获取当前按钮所在的 li 节点
        const $li = $(e.target).parents('.hot-item')
        // 在 li 节点中查找后代节点，构建商品对象
        // 构建当前选购商品的对象
        const curr = {
          id: $li.data('id'), // 获取在 li 节点上自定义 id 属性(data-id)的值
          title: $li.children('.title').html(),
          price: $li.find('.price').text(),
          image: $li.find('.image').attr('src'),
          amount: 1
        }
        // 配置，保存或读取cookie时，自动实现JSON转换
        $.cookie.json = true
        // 从 cookie 中读取已有保存的购物车数组数据
        const cart = $.cookie('cart') || []
        // 判断购物车数组中是否存在当前选购的商品，
        // 如果存在，则修改数量即可。不存在则添加到数组中
        const index = cart.findIndex(prod => prod.id === curr.id)
        if (index !== -1) { // 存在已选购的当前商品
          cart[index].amount += 1
        } else { // 不存在当前选购的商品，则添加到数组中
          // 将当前选购商品保存到 cart 数组中
          cart.push(curr)
        }
        // 将购物车数组保存到 cookie 中
        $.cookie('cart', cart, {expires: 70})
  
        console.log($.cookie('cart'))
      })
  
      $('.hot').on('click', '.image', e => {
        // 获取当前按钮所在的 li 节点
        const $li = $(e.target).parents('.hot-item')
        // 在 li 节点中查找后代节点，构建商品对象
        // 构建当前选购商品的对象
        const curr = {
          id: $li.data('id'), // 获取在 li 节点上自定义 id 属性(data-id)的值
          title: $li.children('.title').html(),
          price: $li.find('.price').text(),
          originprice: $li.find('.originprice').text(),
          image: $li.find('.image').attr('src'),
          amount: 1
        }
        // 配置，保存或读取cookie时，自动实现JSON转换
        $.cookie.json = true
        
        // 将购物车数组保存到 cookie 中
        $.cookie('detail', curr, {expires: 70,path:'/'})
        
        console.log($.cookie('detail'))
  
        window.location.href='detail.html'
        
      })
  
  
      //添加购物车抛物线效果
      var $ball = $('#ball')[0];
      $('.hot').on('click', '.add-to-cart', evt => {
          $ball.style.display='block';
          console.log(evt.clientX,evt.clientY)
          $ball.style.top = evt.clientY+'px';
          $ball.style.left = evt.clientX+'px';
          $ball.style.transition = 'left 0s, top 0s';
          setTimeout(()=>{
              $ball.style.top = '750px';
              $ball.style.left = '1200px';
              $ball.style.transition = 'left 1s linear, top 1s ease-in';
          }, 0)
          setTimeout(()=>{
            $ball.style.display='none';
          },1000)
      })
      
        
      
        
        $('.address').html('首页 > '+GetQueryString("address"))

        if(GetQueryString("page")==1)$('.page').html(GetQueryString("page")+' - 168页<a href="" class="next">/下一页></a>')
        else $('.page').html('<a href="" class="prev"><上一页</a>'+GetQueryString("page")+' - 168页<a href="" class="next">/下一页></a>')
        
        //翻页操作
        $('.next').click((e)=>{
            let html ='../html/list.html?page='+(GetQueryString("page")*1+1)+'&&address='+GetQueryString("address")
            window.location.href=html
            return false;
        })
        $('.prev').click((e)=>{
            let html ='../html/list.html?page='+(GetQueryString("page")*1-1)+'&&address='+GetQueryString("address")
            window.location.href=html
            return false;
        }) 
      
    })
  })